<template>
	<div class="">
		<button>{{word}}</button>
	</div>
</template>

<script setup>
	import {
		defineProps
	} from 'vue';

	// 定义组件接收的 props
	const props = defineProps({
		word: {
			type: String,
			default: ''
		}
	});
</script>

<style scoped>
	button {
		width: 150px;
		height: 50px;
		outline: none;
		z-index: 1;
		color: #aaffff;
		background-color: #aaaaff;
		border-radius: 10px;
		/* outline: 4px solid #fff; */
		cursor: pointer;
		position: relative;
		border: none;
		/* 先移除原有的边框样式，以便用伪元素创建动画边框 */
		overflow: hidden;
	}

	button::before {
		content: '';
		position: absolute;
		width: 200%;
		height: 200%;
		left: 50%;
		top: 50%;
		border: 4px solid;
		border-radius: 5px;
		background-color: #aaffff;
		animation: rotateBorder 5s linear infinite;
		transform-origin: left top;
		z-index: -2;
	}

	@keyframes rotateBorder {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	button::after {
		content: '';
		position: absolute;
		inset: 4px;
		background: #aaaaff;
		z-index: -1;
		border-radius: inherit;
	}
</style>